<template>
    <div class="nav-tabs-custom full-window">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li
                    v-for="r in renderData"
                    :class="{
                  'active': ($index === active),
                  'disabled': r.disabled
                }"
                    @click.prevent="handleTabListClick($index, r)"

            >
                <a href="javascript:void(0)">{{r.header}}
                    <div class="pull-right close-tool">
                        <button type="button" class="btn btn-box-tool" @click="remove($index)" title="Remove">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </a>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content full-window">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            effect: {
                type: String,
                default: 'fadein'
            },
            active: {
                type: Number,
                default: 0,
                twoWay: true
            }
        },
        data(){
            return {
                renderData: []
            }
        },
        methods: {
            handleTabListClick(index, el) {
                console.log(index)
                if (!el.disabled) this.active = index
            },
            resetIndex(){
              for(var c in this.$children){
                  this.$children[c].index=c;
              }
            },
            remove(index){

                this.$children[index].$destroy(true);
                this.resetIndex();
                if(this.active>=index){
                    this.active--;
                    if (this.active > (this.$children.length - 1)) {
                        this.active = this.$children.length - 1;
                    }

                }



            }
        }
    }
</script>
<style>
    .close-tool {
        position: absolute;
        top: 6px;
        right: -3px
    }
    .full-window{
        width:100%;
        height: 100%;
    }
</style>
